KnockoutJS তে Observable Arrays এর সাথে AJAX ব্যবহার করা একটি শক্তিশালী উপায় যা আপনাকে dynamic UI তৈরি করতে সাহায্য করে যেখানে ডেটা server-side থেকে আসছে এবং observable arrays এর মাধ্যমে তা UI তে ডাইনামিকভাবে আপডেট হচ্ছে। KnockoutJS এর observable arrays এবং AJAX এর কম্বিনেশন আপনাকে real-time data binding এবং two-way data binding এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।
Observable Arrays এর সাথে AJAX ব্যবহার:
Observable Arrays হল KnockoutJS এর একটি বিশেষ বৈশিষ্ট্য যা আপনাকে array ডেটা মডেল হিসেবে ব্যবহার করতে দেয়, এবং যখন আপনি array তে কোনো পরিবর্তন করেন, তা স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হয়।
এখানে আমরা দেখব কিভাবে AJAX কল ব্যবহার করে Observable Array এর মান server-side থেকে ফেচ করা যায় এবং সেই ডেটা UI তে আপডেট করা যায়।
1. AJAX কল করার জন্য KnockoutJS ব্যবহার:
আমরা একটি সিম্পল উদাহরণ তৈরি করব যেখানে আমরা AJAX কল করে একটি Observable Array তে ডেটা ফেচ করব এবং সেই ডেটা UI তে দেখাবো। এখানে JSON ডেটা আমরা server থেকে ফেচ করব এবং তা observable array তে সংরক্ষণ করব।
HTML এবং KnockoutJS এর মাধ্যমে AJAX কল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Observable Arrays with AJAX</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>List of Users</h2>
<!-- List to display the users -->
<ul data-bind="foreach: users">
<li data-bind="text: name"></li>
</ul>
<button data-bind="click: loadUsers">Load Users</button>
<script>
function AppViewModel() {
// Observable array to store users
this.users = ko.observableArray([]);
// Method to fetch data using AJAX
this.loadUsers = function() {
var self = this;
// Simulate an AJAX call (here using a fake API for illustration)
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
// Update the observable array with the fetched data
self.users(data); // This will update the UI automatically
})
.catch(error => console.error('Error fetching data:', error));
};
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
ব্যাখ্যা:
usersObservable Array:usersএকটি observable array যা AJAX কলের মাধ্যমে ডেটা ফেচ করা হবে এবং UI তে দেখানো হবে। এটি KnockoutJS এর observable array যা ডেটা পরিবর্তিত হলে UI আপডেট করে।
loadUsersMethod:loadUsersমেথডটি একটি AJAX কলের মাধ্যমে users ডেটা ফেচ করে এবং users() পদ্ধতি ব্যবহার করে সেই ডেটা observable array তে সেট করা হয়।- এখানে,
fetchAPI ব্যবহার করা হয়েছে ডেটা ফেচ করার জন্য, তবে আপনি অন্য কোনো AJAX লাইব্রেরি (যেমন jQuery AJAX) বা XMLHttpRequest ব্যবহার করলেও এটি কার্যকরী হবে।
foreachBinding:- KnockoutJS এর
foreachবাইন্ডিং ব্যবহার করে আমরা observable array তে থাকা ডেটাকে HTML list আকারে প্রদর্শন করেছি। এই বাইন্ডিংয়ের মাধ্যমে যখন observable array পরিবর্তিত হয়, তখন UI তে সেই পরিবর্তন প্রতিফলিত হয়।
- KnockoutJS এর
buttonBinding:- Load Users বাটনে ক্লিক করার মাধ্যমে
loadUsersমেথড কল হয় এবং observable array আপডেট হয়, ফলে UI তে ইউজারের তালিকা স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।
- Load Users বাটনে ক্লিক করার মাধ্যমে
AJAX থেকে আসা ডেটা (JSON):
উদাহরণস্বরূপ, JSONPlaceholder API থেকে ডেটা ফেচ করা হচ্ছে, যা users এর একটি তালিকা প্রদান করবে।
Sample JSON Response:
[
{ "id": 1, "name": "Leanne Graham" },
{ "id": 2, "name": "Ervin Howell" },
{ "id": 3, "name": "Clementine Bauch" },
{ "id": 4, "name": "Patricia Lebsack" }
]
2. Observable Arrays এর সাথে অন্যান্য কার্যকলাপ:
Pushing Data into Observable Array:
KnockoutJS তে আপনি observable arrays এর মধ্যে নতুন আইটেম যোগ করতে পারেন। আপনি push, pop, shift, unshift ইত্যাদি মেথড ব্যবহার করতে পারেন।
this.users.push({ name: "New User" }); // Adds a new user to the observable array
Removing Data from Observable Array:
observable arrays থেকে ডেটা মুছতে remove অথবা removeAll ব্যবহার করা হয়:
// Remove a specific user
this.users.remove(user => user.name === "Leanne Graham");
// Remove all users
this.users.removeAll();
Sorting Observable Arrays:
KnockoutJS তে আপনি observable arrays কে সর্টও করতে পারেন:
this.users.sort((a, b) => a.name.localeCompare(b.name)); // Sort by name
3. Advantages of Using Observable Arrays with AJAX in KnockoutJS:
- Dynamic UI:
- observable arrays ব্যবহার করলে, ডেটার কোনো পরিবর্তন হলেই UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। এটি রিয়েল-টাইম ডেটা পরিবর্তন দেখানোর জন্য খুবই কার্যকরী।
- Reactivity:
- KnockoutJS এর two-way data binding এর মাধ্যমে, আপনি যখন observable array তে কোনো আইটেম যোগ করবেন বা মুছবেন, তা UI তে অবিলম্বে প্রতিফলিত হবে।
- Server-Side Data Handling:
- AJAX কলের মাধ্যমে আপনি server-side data ফেচ করতে পারেন এবং তা observable array তে ম্যানিপুলেট করে UI তে প্রদর্শন করতে পারেন, যা ডেটার জন্য real-time interaction নিশ্চিত করে।
- Simplified Code:
- KnockoutJS এর মাধ্যমে observable arrays ব্যবহার করলে আপনি কোড কমপ্লেক্সিটি কমাতে পারেন, কারণ এটি UI এবং ডেটার মধ্যে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন প্রদান করে।
KnockoutJS এর observable arrays এবং AJAX এর সংমিশ্রণ আপনাকে ওয়েব অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। আপনি সহজেই server-side data ফেচ করে তা observable arrays তে সংরক্ষণ করতে পারেন এবং তা UI তে রিয়েল-টাইম আপডেট হিসেবে দেখাতে পারেন। KnockoutJS এর two-way data binding এবং observables এর মাধ্যমে কোড আরো সহজ এবং রক্ষণাবেক্ষণযোগ্য হয়।
Read more
